<template>
  <div class="lyric-list">
      <div class="mini current" v-if="mode == 1">
          {{currentSentence}}
      </div>
      <div class="list" v-if="mode == 0">
          <scroll class="scroll" ref="scroll"
          :probeType="3" @scroll="scroll"
           >
            <div :id="'ly' +item.time" :ref="'ly' +item.time" :class="{current: currentIdx == idx}" v-for="(item,idx) in lyricList" :key="idx">{{item.sentence}}</div>
          </scroll>
      </div>
  </div>
</template>

<script>
import scroll from "base/scroll"
import {Lyric} from "model/song"
import {_mt} from "common/utils"
import {addClass,removeClass} from "common/dom"

function test(){
    let lyricList = []
lyricList.push(new Lyric(3,"爱哟 请不要再消失了 u um"));
lyricList.push(new Lyric(6,"I Need You ずっと捜してた"));
lyricList.push(new Lyric(8,"I need you 一直都在寻找你"));
lyricList.push(new Lyric(10,"愛を止めないで もう u um"));
lyricList.push(new Lyric(15,"爱哟 请不要停止 u um"));
lyricList.push(new Lyric(18,"これが最後の Fall In Love"));
lyricList.push(new Lyric(22,"这就是最后的Fall in love"));
lyricList.push(new Lyric(23,"朝になれば City Light"));
lyricList.push(new Lyric(28,"到了早晨 City light"));
lyricList.push(new Lyric(30,"いつでも消えていくけど"));
lyricList.push(new Lyric(31,"总是消失不见"));
lyricList.push(new Lyric(33,"二人逢ったこの偶然"));
lyricList.push(new Lyric(35,"两人偶然的邂逅"));
lyricList.push(new Lyric(40,"このままだいじにしたいよ"));
lyricList.push(new Lyric(41,"想一直珍惜下去"));
lyricList.push(new Lyric(42,"膝をかかえるための"));
lyricList.push(new Lyric(50,"原本是抱着膝盖的"));
lyricList.push(new Lyric(56,"昨日までの両手"));
lyricList.push(new Lyric(60,"双手到昨天为止"));
lyricList.push(new Lyric(63,"今日からはおたがいの"));
lyricList.push(new Lyric(66,"现在则是为了"));
lyricList.push(new Lyric(68,"ハートをのせて"));
lyricList.push(new Lyric(69,"接受你的爱而存在"));
lyricList.push(new Lyric(70,"愛よ消えないで もう u um"));
lyricList.push(new Lyric(71,"爱哟 请不要再消失了 u um"));
lyricList.push(new Lyric(80,"I Need You ２度と迷わない"));
lyricList.push(new Lyric(81,"I Need You ２度と迷わない"));
lyricList.push(new Lyric(82,"我需要你 再也不会踌躇不决"));
lyricList.push(new Lyric(83,"愛を止めないで もう u um"));
lyricList.push(new Lyric(85,"爱哟 请不要停止 u um"));
lyricList.push(new Lyric(90,"瞳見つめて Fall In Love"));
lyricList.push(new Lyric(91,"凝视着你的双眼 Fall in love"));
lyricList.push(new Lyric(93,"愛よ消えないで もう u um"));
lyricList.push(new Lyric(95,"爱哟 请不要再消失了 u um"));
lyricList.push(new Lyric(98,"I Need You ずっと捜してた"));
    return lyricList;
}

export default {
  data () {
      return {
          currentTime: 0,
          currentIdx: 0,
          lyricList: []
      }
  },
  mounted(){
    this.init()
    this.lyricList = test();
  },
    props: {
        mode : {
            type: Number,
            default: 0  // 0 表示列表展示 1 表示迷你展示
        },
        playingTime : {  // 当前播放时间
            type: Number,
            default: 0
        },
        duration: {  // 总时长
           type: Number
        },
    },
  components: {
      scroll
  },

  computed: {
      currentSentence(){
          if(typeof this.lyricList[this.currentIdx] != 'undefined' && "sentence" in this.lyricList[this.currentIdx]){
                return this.lyricList[this.currentIdx].sentence
          }
            return ''
      }
  },

  watch: {
      playingTime(v) {
          this._mdc(v)
      }
  },
  filters: {
      v(v){
          return v;
      }
  },

  methods: {
      scroll(p){
          console.log(p)
      },
      init(){
          this._mdc = _mt((v) => {
            if(v != 0 && v != false){
                    this.currentTime = Number.parseInt(v);
                    let lyricLength= this.lyricList.length;
                    // 滚动到指定位置
                    for(let i=0;i<lyricLength; i++){
                        if(this.lyricList[i].time > this.currentTime){

                            this.currentIdx = i;
                            if(this.mode == 0){
                                if(i > 5) {
                                    this.$refs.scroll && this.$refs.scroll.scrollToElement('#ly'+ this.lyricList[i-5].time)
                                }
                            }
                            break;
                        }
                    }
                    if(this.mode == 0){
                        
                        if(this.lyricList[lyricLength - 1 ].time < this.currentTime){
                            this.$refs.scroll && this.$refs.scroll.scrollToElement('#ly'+ this.lyricList[lyricLength-2].time)
                            this.currentIdx = lyricLength - 1;
                        }
                    }
                }
              },800)
      }
  }
}

</script>
<style scoped>
.lyric-list{
    padding: 10px 0;
    text-align: center;
}
.list .scroll{
    height: 387px;
    overflow: hidden;
}
.list .scroll div {
    margin: 5px;
    color:  var(--color-text-d);
    font-size: 15px;
}

.list .current{
    font-size: 17px  !important;
    color: whitesmoke !important;
}

</style>